<template>
  <div class="search-history">
    <van-cell title="搜索历史"
      ><div v-if="deleteMode">
        <span @click="$emit('deleteAllHistory')">全部删除</span>
        &nbsp; &nbsp;
        <span @click="deleteMode = false">完成</span>
      </div>
      <van-icon name="delete-o" v-else @click="deleteMode = true"></van-icon>
    </van-cell>

    <van-cell
      :title="history"
      v-for="(history, index) in searchHistory"
      :key="index"
      @click="clickHistory(history, index)"
    >
      <van-icon name="close" v-if="deleteMode"></van-icon>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: "SearchHistory",
  props: {
    searchHistory: { type: Array, required: true },
  },
  data() {
    return {
      deleteMode: false,
    };
  },
  methods: {
    // 点击搜索历史
    clickHistory(history, index) {
      if (this.deleteMode) {
        this.$emit("deleteHistory", index);
      } else {
        this.$emit("search", history);
      }
    },
  },
};
</script>

<style></style>
